<template>
    <div class="login-box">
      <div class="login-welcome" v-if="!showLogin">
        <van-circle v-model="progress"
          :rate="100"
          size="40px"
          :clockwise="false"
          color="#ff5b02"
          @click.native="closeTimer"
          :text="(Math.ceil(progress/20)) + 's'"/>
        <span class="title">凌动科技采购系统</span>
        <span class="sub">{{welText}}</span>
      </div>
      <div class="login-content" v-else>
        <span class="title">凌动科技采购系统</span>
        <div class="line">
            <input type="text" placeholder="输入手机账号" v-model="loginObj.phone">
        </div>
        <div class="line">
            <input type="text" placeholder="输入验证码" v-model="loginObj.vdtCode">
            <span @click="getVdtCode">{{vdtText}}</span>
        </div>
        <van-checkbox v-model="remember" checked-color="#ff5b02">是否记住手机号码？</van-checkbox>
        <van-checkbox v-model="auto" checked-color="#ff5b02">是否免登陆？</van-checkbox>
        <van-button block color="#ff5b02" @click="loginEvt">登录</van-button>
      </div>
      <span class="footer">design by qianfeng &copy; 2021-</span>
    </div>
</template>

<script>
import { AES, enc } from 'crypto-js'
import { getVdtCodeApi, loginApi, userInfoApi, autoLoginApi } from '../../apis/loginApi'
// import axios from 'axiso'
export default {
  data () {
    return {
      showLogin: false,
      progress: 100,
      // 因为已进入欢迎页面，要开始免登录判断和数据请求，所以默认为loading
      autoAlag: 'loading',
      welText: [
        '一月，我听到了爆竹的声声催促',
        '二月，我闻到了腊梅的缕缕幽香',
        '三月，我看到了桃花绚烂如云霞',
        '四月，我躺在了柳阴中酣然入梦',
        '五月，我品尝着晶莹剔透的樱桃',
        '六月，我观赏水莲花的绰约芳姿',
        '七月，我跃入那清波荡漾的碧水',
        '八月，置身于桂花雨中翩然起舞',
        '九月，我漫步在飘满落叶的小径',
        '十月，我欣然采摘那累累的硕果',
        '十一月，我聆听冬天走来的步履',
        '十二月，我掬起一捧洁白的雪花'
      ][new Date().getMonth()],
      loginObj: {
        phone: '',
        vdtCode: ''
      },
      vdtText: '获取验证码',
      remember: false,
      auto: false
    }
  },
  created () {
    this.loopTimer()

    // 判断是否免登录
    this.autoLogin()
  },
  methods: {
    // 欢迎页面倒计时
    loopTimer () {
      this.timer = setTimeout(() => {
        this.progress -= 1
        if (this.progress > 0) {
          this.loopTimer()
        } else {
          // 考虑免登录的问题
          if (this.autoFlag === 'home') {
            this.$router.push('/home')
          } else {
            this.showLogin = true
          }
        }
      }, 5 * 1000 / 100)
    },
    // 关闭欢迎页的定时器
    closeTimer () {
      if (this.autoFlag === 'loading') return
      if (this.autoFlag === 'home') {
        this.$router.push('./home')
      } else {
        this.showLogin = true
      }
      clearTimeout(this.timer)
    },
    // 1、防止用户二次点击获取验证码
    // 2、当倒计时没有完成的时候，点击不能发出请求，倒计时到了，用户又可以点击
    // 实现一个节流 -- 需要一个标识 可以使用按钮文字来实现这个标识
    async getVdtCode () {
      // 先判断是否在倒计时vdtText(重新获取(20s))，是否在请求数据（获取中...）
      if (this.vdtText !== '获取验证码') return
      // 校检手机号
      if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.loginObj.phone)) {
        this.$toast({
          message: '手机号码输入错误',
          position: 'bottom'
        })
        return
      }
      this.vdtText = '获取中...'

      const result = await getVdtCodeApi(this.loginObj.phone)
      if (result.code !== 200) {
        this.$toast({
          message: '获取验证码失败',
          position: 'bottom'
        })
        this.vdtText = '获取验证码'
        return
      }
      this.$toast.success(`验证码：${result.data.vdtCode}`)
      // 执行倒计时递归方法
      this.loopVdtTimer(Date.now())
    },
    // 获取验证码倒计时的递归
    loopVdtTimer (startTime) {
      setTimeout(() => {
        const st = 5 - Math.ceil((Date.now() - startTime) / 1000)
        if (st > 0) {
          this.vdtText = `重新获取${st}s`
          this.loopVdtTimer(startTime)
        } else {
          // 用户又可以获取验证码了
          this.vdtText = '获取验证码'
        }
      }, 200)
    },
    // 免登陆
    async autoLogin () {
      // 获取自动登录的标识
      const flag = localStorage.getItem('auto-token')
      // 有自动登录的标识
      if (flag) {
        // 把token缓存到vuex，然后再发送请求
        this.$store.commit('common/setToken', flag)

        // 发送请求
        const result = await autoLoginApi()
        if (result.code === 200) {
          console.log(result)
          this.$store.commit('common/setUser', result.data)

          // 因为欢迎还在倒计时，这里广告时间还没有结束，所以不能直接跳转页面
          // 设置标识为home
          this.autoFlag = 'home'
        } else {
          // 免登陆失败，需要查看是否记住手机号
          this.getPhone()
        }
      } else {
        // 没有标识，就进入login页，并判断是否有记住手机号码
        this.getPhone()
      }
    },
    // 查看是否缓存有手机号，有就显示出来
    getPhone () {
      const phoneCache = localStorage.getItem('auto-phone')
      if (phoneCache) {
        // 解密
        this.loginObj.phone = AES.decrypt(phoneCache, 'lyfus').toString(enc.Utf8)
        this.remember = true
      }
      // 设置标识为login
      this.autoAlag = 'login'
    },
    // 登录业务
    async loginEvt () {
      // 校检数据，
      if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.loginObj.phone)) {
        this.$toast('请输入正确的手机号')
        return
      }
      if (!/^[0-9]{4}$/.test(this.loginObj.vdtCode)) {
        this.$toast('验证码输入错误')
        return
      }

      // 开始登录接口调用
      this.$toast.loading({
        message: '登录中...',
        forbidClick: true,
        duration: 0
      })

      const result = await loginApi(this.loginObj)
      if (result.code !== 200) {
        this.$toast('登录失败，请重新尝试')
        this.$toast.clear()
        return
      }
      // 登录请求获取成功，缓存token信息
      this.$store.commit('common/setToken', result.data.token)

      // 获取用户信息
      const user = await userInfoApi(result.data.id)
      // 系统中会一直使用用户信息，所以需要缓存到vuex中去
      this.$store.commit('common/setUser', user.data)

      // 判断用户是否记住手机号，用户是否同意自动登录
      if (this.remember) {
        // 加密处理
        localStorage.setItem('auto-phone', AES.encrypt(this.loginObj.phone, 'lyfus').toString())
      } else {
        localStorage.removeItem('auto-phone')
      }
      if (this.auto) {
        // 缓存token数据
        localStorage.setItem('auto-token', result.data.token)
      } else {
        localStorage.removeItem('auto-token')
      }

      // 关闭加载框
      this.$toast.clear()

      // 在uvex中获取数据，不会造成线程阻塞
      this.$store.dispatch('common/rightsAct', user.data.role)

      // 跳转到登录页面
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="less" scoped>
  @import './index.less';
</style>
